/* stepper / input number 
*/
.el-input-number {
  --input-num-size-large: 48px;
  --input-num-size-medium: 36px;
  --input-num-size-small: 24px;
  @apply w-32;
  .el-input-number__decrease,
  .el-input-number__increase {
    top: 0;
    bottom: 0;
    width: var(--input-num-size-medium);
    border-radius: 8px;
    border: 0;
  }
  .el-input-number__decrease:hover ~ .el-input:not(.is-disabled),
  .el-input-number__increase:hover ~ .el-input:not(.is-disabled) {
    .el-input__wrapper {
      box-shadow: none;
    }
  }
  .el-icon {
    font-size: 16px;
  }
  .el-input {
    --input-size-large: var(--input-num-size-large);
    --input-size-medium: var(--input-num-size-medium);
    --input-size-small: var(--input-num-size-small);
    .el-input__wrapper {
      box-shadow: none;
    }
  }
  &.is-filled {
    .el-input-number__decrease,
    .el-input-number__increase {
      background-color: var(--surface-filled-rest);
      color: var(--text-cta-achromatic);
      &:not(.is-disabled):hover {
        background-color: var(--surface-filled-hover);
      }
      &:not(.is-disabled):active {
        background-color: var(--surface-filled-pressed);
      }
      &.is-disabled {
        background-color: var(--surface-filled-disabled);
        color: var(--text-cta-disabled);
      }
    }
  }
  &.is-outlined {
    .el-input-number__decrease,
    .el-input-number__increase {
      background-color: transparent;
      border: 1px solid var(--stroke-border-cta-rest);
      color: var(--text-cta-rest);
      &:not(.is-disabled):hover {
        border-color: var(--stroke-border-cta-hover);
      }
      &:not(.is-disabled):active {
        border-color: var(--stroke-border-cta-pressed);
      }
      &.is-disabled {
        border-color: var(--stroke-border-cta-disabled);
        color: var(--text-cta-disabled);
      }
    }
  }
  &.is-tonal {
    .el-input-number__decrease,
    .el-input-number__increase {
      background-color: var(--surface-tonal-rest);
      color: var(--text-cta-tonal);
      &:not(.is-disabled):hover {
        background-color: var(--surface-tonal-hover);
      }
      &:not(.is-disabled):active {
        background-color: var(--surface-tonal-pressed);
      }
      &.is-disabled {
        background-color: var(--surface-tonal-disabled);
        color: var(--text-cta-disabled);
      }
    }
  }
  &.el-input-number--large {
    @apply w-40;
    .el-input-number__decrease,
    .el-input-number__increase {
      width: var(--input-num-size-large);
    }
  }
  &.el-input-number--small {
    @apply w-28;
    .el-input-number__decrease,
    .el-input-number__increase {
      width: var(--input-num-size-small);
    }
  }
}
